

        // 故事详情数据 - 从服务器动态获取
function getStoryDetail(storyId) {
            // 显示加载状态
            document.getElementById('storyDetailContent').innerHTML = '<div style="text-align: center; padding: 20px;">加载中...</div>';
            document.getElementById('storyModal').style.display = 'block';
            document.body.style.overflow = 'hidden';
            
            // 使用AJAX从服务器获取故事详情
            fetch(`/store_system/api/story/${storyId}/`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(story => {
                    displayStoryDetail(story);
                })
                .catch(error => {
                    console.error('获取故事详情失败:', error);
                    document.getElementById('storyDetailContent').innerHTML = `
                        <div style="text-align: center; padding: 20px; color: #d9534f;">
                            <i class="fas fa-exclamation-triangle" style="font-size: 3rem; margin-bottom: 1rem;"></i>
                            <h3>获取故事详情失败</h3>
                            <p>请稍后重试或联系管理员</p>
                            <button class="btn btn-primary" onclick="getStoryDetail(${storyId})">重新加载</button>
                        </div>
                    `;
                });
        }
        
        // 显示故事详情
        function displayStoryDetail(story) {
            // 格式化内容，将换行符转换为HTML段落
            const formattedContent = story.content
                .split('\n')
                .filter(para => para.trim() !== '')
                .map(para => `<p>${para}</p>`)
                .join('');
            
            const modalContent = `
                <div class="story-detail-header">
                    <h2>${story.title}</h2>
                    <div class="story-detail-meta">
                        <span><i class="fas fa-user"></i> 作者: ${story.author}</span>
                        <span><i class="fas fa-calendar-alt"></i> 日期: ${story.date}</span>
                        <span><i class="fas fa-heart"></i> 点赞: ${story.likes}</span>
                        <span><i class="fas fa-eye"></i> 阅读: ${story.read || 0}</span>
                    </div>
                </div>
                <div class="story-detail-content">
                    ${formattedContent}
                </div>
            `;
            
            document.getElementById('storyDetailContent').innerHTML = modalContent;
        }

        // 打开故事详情
        function openStoryDetail(storyId) {
            getStoryDetail(storyId);
        }

        // 关闭故事详情
        function closeStoryDetail() {
            document.getElementById('storyModal').style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('storyModal');
            if (event.target === modal) {
                closeStoryDetail();
            }
        };

        // 页面加载后的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为导航链接添加激活状态
            const currentPage = window.location.pathname.split('/').pop();
            const navLinks = document.querySelectorAll('.nav-links a');

            navLinks.forEach(link => {
                const linkPage = link.getAttribute('href');
                if (linkPage === currentPage || (currentPage === '' && linkPage === '#')) {
                    link.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
                }
            });

            // 滚动效果
            const scrollElements = document.querySelectorAll('.feature-card, .story-card');
            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = 1;
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });

            scrollElements.forEach(el => {
                el.style.opacity = 0;
                el.style.transform = 'translateY(20px)';
                el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(el);
            });
        });
